<template>
	<view class="content">
		<view class="user_logo">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl"></image>
			</button>
			<!-- <view @click="changeimg()">
				<image v-if="userdata.headimg" :src="userdata.headimg" mode="aspectFill"></image>
				<image v-else :src=" z_imgPath + 'user/headimg.png'"></image>
			</view> -->
			<image :src="z_imgPath + 'mine/logo_b.png'"></image>
			<view>设置头像</view>
			<!-- <view>{{userdata.nickname}}</view> -->
		</view>
		<view class="nicheng_tit">设置昵称</view>
		<input class="nicheng_ipt" type="nickname" v-model="nickname" placeholder="请输入您的昵称" value="" />
		<view class="btn_b">
			<image :src="z_imgPath + 'mine/change_btn.png'" mode="widthFix" @click="setdata()"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				z_imgPath: this.$z_img,
				userdata: uni.getStorageSync('userinfo'),
				imgs: '',
				headimg: '',
				avatarUrl: uni.getStorageSync('userinfo').headimg,
				nickname: uni.getStorageSync('userinfo').nickname,
			}
		},
		onLoad() {

		},
		methods: {
			changeimg() {
				var that = this;
				uni.chooseImage({ //从本地相册选择图片或使用相机拍照
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						console.log(res)
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						let tempFilePaths = res.tempFilePaths[0];
						uni.uploadFile({
							url: that.siteBaseUrl + 'picture',
							filePath: tempFilePaths,
							name: 'file',
							success(e) {
								let res = JSON.parse(e.data)
								if (res.status == 1) {
									that.userdata.headimg = res.data.path
									// that.headimg = res.data.imgurl
								} else {
									uni.showModal({
										title: "提示",
										content: "上传失败",
										showCancel: false
									})
								}
							}
						})
					}
				})
			},
			setdata() {
				var that = this;
				that.req({
					url: 'update_userinfo',
					data: {
						nickname: that.userdata.nickname,
						headimg: that.userdata.headimg
					},
					success(res) {
						if (res.status == 1) {
							uni.showToast({
								title: '修改成功',
								icon: 'success',
								success() {
									setTimeout(() => {
										uni.redirectTo({
											url: './index'
										})
									}, 1000)
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background: #09081C;
	}

	.user_logo {
		/* background-color: #000000; */
		padding: 80rpx 0 60rpx 0;
		text-align: center;
	}

	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		height: 160rpx;
	}

	.user_logo>.avatar-wrapper {
		width: 160rpx;
		height: 160rpx;
		margin: auto;
		border-radius: 160rpx;
		overflow: hidden;
		border: 1px solid #B07CDD;
	}

	.user_logo>.avatar-wrapper>image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 160rpx;
		overflow: hidden;
	}

	.user_logo>image {
		width: 44rpx;
		height: 44rpx;
		position: relative;
		bottom: 30rpx;
		left: 80rpx;
	}

	.user_logo>view:nth-of-type(1) {
		font-size: 25rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.user_logo>view:nth-of-type(3) {
		font-size: 22rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 20rpx;
	}

	.nicheng_tit {
		font-size: 32rpx;
		font-weight: 400;
		color: #999999;
		padding: 0 36rpx;
		margin-top: 70rpx;
	}

	.nicheng_ipt {
		width: 690rpx;
		height: 88rpx;
		background: #333333;
		border: 1px solid #333333;
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 0 36rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFF;
		border-radius: 9rpx;
		margin-top: 22rpx;
	}

	.btn_b>image {
		width: 438rpx;
		height: 89rpx;
	}

	.btn_b {
		margin: 0 36rpx;
		height: 80rpx;
		/* background: linear-gradient(90deg, #FF8A17 0%, #FFD800 100%); */
		border-radius: 29px;
		font-size: 36rpx;
		/* font-weight: 600; */
		color: #000000;
		text-align: center;
		line-height: 80rpx;
		margin-top: 140rpx;
	}
</style>
